.p-home {
    padding: 0 1rem 1rem;

    .card {
        padding: .75rem;
        border-radius: 1rem;
        background-color: rgba(255, 255, 255, .2);
    }

    header {
        h1 {
            text-align: center;
        }
    }

    main {
        position: relative;

        h3 {
            margin-top: 0;
            text-align: center;
            font-weight: bold;
        }

        &>section {
            display: flex;

            &>.card {
                flex: 1;
                outline: 1px solid #999;
            }

            .scoreList,
            .history {
                margin-right: 8rem;
                .ant-list{
                    background-color: rgba(255, 255, 255, .5);
                    h4{
                        text-align: center;
                        font-weight: bold;
                    }
                    .ant-list-item{
                        justify-content:flex-start
                    }
                }
            }
        }

        .reward {
            .ant-card {
                margin-bottom: 1rem;

                .ant-card-body .img {
                    margin-bottom: .5rem;
                    height: 8rem;
                    background-position: center;
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }

            .ant-progress {
                height: 2rem;
            }

            .ant-progress-steps-outer {
                flex-wrap: wrap;

                .ant-progress-steps-item {
                    margin-bottom: .5rem;
                }
            }
        }

        .signInBox {
            display: block;
            text-align: center;
        }

        @keyframes scale {

            from,
            to {
                scale: .8;
            }

            40% {
                scale: 1;
            }
        }

        @keyframes addScore {

            from {
                top: -2rem;
                opacity: 1;
            }

            to {
                top: -10rem;
                opacity: 0;
            }
        }

        .signIn {
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 5rem;
            height: 5rem;
            background-color: red;
            border-radius: 50%;
            cursor: pointer;
            animation: scale 1.2s linear infinite;

            .btn {
                position: relative;
                font-size: 1.75rem;
                color: yellow;

                &::before {
                    content: '+5';
                    position: absolute;
                    opacity: 0;
                    // z-index: -99;
                }

                &.addScore {
                    &::before {
                        animation: addScore 5s ease
                    }
                }
            }

            &:hover {
                box-shadow: 0 0 .5rem .5rem orange;
            }

            &:active {
                box-shadow: 0 0 2.5rem 2.5rem orange;
            }

            &.disable {
                animation: none;
                opacity: .3;
                pointer-events: none;

                .btn::before {
                    display: none;
                }
            }
        }
    }
}